<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS计数器</title>
    <style>
        ul {}
        
        .nested ul {
            list-style-type: none;
            counter-reset: counter-1;
        }
        
        .nested ul li::before {
            counter-increment: counter-1;
            content: counters(counter-1, '.')'. '
        }

        .nested-2 dl {
            counter-reset: counter-p;
        }
        .nested-2 dl dt {
            counter-increment: counter-p;
            counter-reset: counter-s;
        }
        .nested-2 dl dt::before {
            content: counter(counter-p)'. '
        }
        .nested-2 dl dd::before {
            counter-increment: counter-s;
            content: counter(counter-s)'. '
        }
    </style>
</head>

<body>
    <div class="nested">
        <ul>
            <li>南方水果
                <ul>
                    <li>芒果</li>
                    <li>菠萝</li>
                    <li>甘蔗</li>
                    <li>香蕉
                        <ul>
                            <li>云南香蕉</li>
                            <li>湖南香蕉</li>
                            <li>广南香蕉</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>北方水果
                <ul>
                    <li>苹果
                        <ul>
                            <li>烟台苹果</li>
                            <li>其它苹果</li>
                        </ul>
                    </li>
                    <li>梨</li>
                    <li>西瓜</li>
                </ul>
            </li>
            <li>进口水果
                <ul>
                    <li>提子</li>
                    <li>火龙果</li>
                    <li>奇异果</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="nested-2">
        <dl>
            <dt>南方水果</dt>
            <dd>芒果</dd>
            <dd>菠萝</dd>
            <dd>甘蔗</dd>
            <dt>北方水果</dt>
            <dd>苹果</dd>
            <dd>梨</dd>
            <dd>西瓜</dd>
        </dl>
    </div>
</body>

</html>